<template>
  <el-card shadow="never">
    <!-- 查询条件 -->
    <ZwSearchForm row-num="3" :option="searchOption" @search="search" @reset="reset" />

    <!-- 查询结果 -->
    <ZwTable
      ref="tableRef"
      class="table-box"
      :option="tableOption"
      :fetch-params="state.searchParams"
      :fetch-api="fetchApi()"
      @select="onSelect"
      @selection-change="onSelectionChange"
      @select-all="onSelectAll"
      @currentChange="onCurrentChange"
      @sizeChange="onSizeChange"
    >
      <template #headerOperate>
        <el-button v-auth="'TEXT_BUTTON'" plain @click="reloadTable">刷新表格</el-button>
        <el-button plain @click="exportTableData">导出话术</el-button>
        <el-button plain>导入话术</el-button>
        <el-button type="primary">新建话术</el-button>
      </template>
    </ZwTable>
  </el-card>
</template>

<script lang="tsx" setup>
  import { ref, reactive, computed } from 'vue'

  import { ElButton } from 'element-plus'

  import { deepCopy } from '@/utils/helper'

  import { getTextList } from '@/api/concreation'

  import ZwSearchForm from '@/components/zw/search-form/SearchForm'
  import ZwTable from '@/components/zw/table/Table'

  import cityData from '@/assets/js/city'

  const defaultParams = {
    group_id: 0
  }

  const tableRef = ref<HTMLElement | null>(null)

  const state = reactive({
    searchParams: deepCopy(defaultParams)
  })

  const searchOption = [
    {
      label: '文本搜索',
      name: 'title',
      value: '',
      type: 'input',
      placeholder: '请输入标题/内容进行查找'
    },
    {
      label: '创建人',
      name: 'user_id',
      value: [],
      type: 'select',
      placeholder: '全部',
      multiple: true,
      popperClass: 'zw-hide_select_option',
      isUserSelect: true,
      formatOption: (v) => ({
        label: v.name,
        value: v.id
      })
    },
    {
      label: '创建人单选',
      name: 'user_radio_id',
      value: '',
      type: 'select',
      placeholder: '全部',
      popperClass: 'zw-hide_select_option',
      isUserSelect: true,
      formatOption: (v) => ({
        label: v.name,
        value: v.id
      })
    },
    {
      label: '添加时间',
      name: 'time',
      value: [],
      type: 'datePicker',
      datePickerType: 'daterange',
      valueFormat: 'YYYY-MM-DD HH:mm:ss',
      startPlaceholder: '开始日期',
      endPlaceholder: '结束日期'
      // 设置结束日期时间为 23:59:59，设完日期不能点击 elment-plus bug？
      // defaultTime: ['00:00:00', '23:59:59']
    },
    {
      label: '标签筛选',
      name: 'tag_list',
      value: [],
      type: 'select',
      placeholder: '请选择标签',
      multiple: true,
      popperClass: 'zw-hide_select_option',
      isTagSelect: true,
      formatOption: (v) => ({
        label: v.name,
        value: v.id
      })
    },
    {
      label: '选择客户',
      name: 'custom_id',
      value: '',
      type: 'select',
      placeholder: '请选择客户',
      multiple: true,
      popperClass: 'zw-hide_select_option',
      isCustomer: true,
      formatOption: (v) => ({
        label: v.name,
        value: v.id
      })
    },
    {
      label: 'select 异步数据',
      name: 'test',
      value: '',
      type: 'select',
      placeholder: '请选择',
      fetchOptionApi: () => {
        return new Promise((resolve) => {
          setTimeout(() => {
            resolve([
              { name: '张三', id: 1 },
              { name: '李四', id: 2 }
            ])
          }, 300)
        })
      },
      formatOption: (v) => ({
        label: v.name,
        value: v.id
      })
    },
    {
      label: '所在地',
      name: 'location',
      value: [],
      type: 'cascader',
      placeholder: '请选择所在地',
      options: cityData,
      props: {
        checkStrictly: true, // 是否严格的遵守父子节点不互相关联
        emitPath: false,
        multiple: true,
        label: 'name',
        value: 'id'
      },
      onChange(v) {
        console.log('所在地：', v)
      }
    }
  ]

  const search = (v) => {
    state.searchParams = v
  }

  const reset = (v) => {
    state.searchParams = deepCopy(defaultParams)
  }

  const tableOption = [
    {
      type: 'selection',
      width: 55,
      fixed: 'left'
    },
    {
      prop: 'title',
      label: '标题',
      width: 200
    },
    {
      prop: 'content',
      label: '内容',
      width: 200,
      showOverflowTooltip: true
    },
    {
      prop: 'tags',
      label: '标签',
      width: 400,
      isTag: true
    },
    {
      label: '创建人',
      prop: 'user_name',
      width: 200
    },
    {
      prop: 'created_at',
      label: '添加时间',
      width: 200
    },
    {
      prop: 'operate',
      label: '操作',
      width: 295,
      fixed: 'right',
      isOperate: true,
      option: [
        {
          id: 0,
          name: '编辑',
          authCode: 'TEXT_BUTTON',
          click: (row, column, index) => {
            console.log('表格行数据', row, column, index)
          }
        },
        { id: 1, name: '修改标签', click: () => {} },
        { id: 2, name: '删除', click: () => {} }
      ]
      // renderOperate({ row }) {
      //   const option = [
      //     { id: 0, name: row.aa ? '开启' : '关闭', click: v => { console.log('表格行数据', v) } },
      //     { id: 1, name: '修改标签', click: () => {} },
      //   ]
      //   return (
      //     option.map((item, itemIndex) => (
      //       <ElButton
      //         vAuth={ item.authCode }
      //         size="small"
      //         onClick={ () => row.aa = !row.aa }
      //         key={ `${ item.id }-${ itemIndex }` }
      //       >
      //         { item.name }
      //       </ElButton>
      //     ))
      //   )
      // }
    }
  ]

  const fetchApi = () => {
    // 获取文件列表
    return getTextList
  }

  // 选中表格 checkbox
  const onSelect = (selection, row) => {
    console.log(selection, row)
  }

  // 选择项变更
  const onSelectionChange = (selection) => {
    console.log(selection)
  }

  // 全选
  const onSelectAll = (selection) => {
    console.log(selection)
  }

  const onCurrentChange = (v) => {
    console.log('页码:', v)
  }

  const onSizeChange = (v) => {
    console.log('页长度:', v)
  }

  // 刷新表格
  const reloadTable = () => {
    tableRef.value.reload()
  }

  // 导出表格数据
  const exportTableData = () => {
    console.log('表格数据：', tableRef.value.getTableData())
  }
</script>

<style lang="scss" scoped></style>
